<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>6.Vue监视数据发生变化的原理</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>公司名称：{{name}}</h2>
        <h2>公司地址：{{address}}</h2>


        <script type="text/javascript">
            //  用 computed 实现
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                       name: '奇瑞',
                       address: '花园大道'
                    }
                },
                methods: {
                    updateMei() {
                        // this.personList[0].name = '马老师'; 奏效，可以的
                        // this.personList[0].age = 50; 奏效，可以的
                        // this.personList[0].sex = '男'; 奏效，可以的

                        //  当前方法不生效
                        this.personList[0] = { id: '001', name: '马老师', age: 50, sex: '男' };
                    }
                },

            });
        </script>

</body>

</html>